<template>
  <div class="app-container">
    <div class="perli_head">
      <h3>流水统计</h3>
      <table class="hed_table">
        <tr>
          <td rowspan="2">收益预览</td>
          <td>总收益</td>
          <td>{{moneyDetail.sumAmount}}元</td>
          <td>公会总收益</td>
          <td>{{moneyDetail.unionAmount}}元</td>
          <td>订单总收益</td>
          <td>{{moneyDetail.sumAmount}}元</td>
          <td>总订单数</td>
          <td>{{moneyDetail.orderNum}}</td>
        </tr>
        <tr>
          <td>近三十日收益</td>
          <td>
            {{moneyDetail.sumAmount30}}元
            <span style="font-size:12px;color:green">{{moneyDetail.sumAmountFee*100}}%</span>
          </td>
          <td>近三十日公会收益</td>
          <td>
            {{moneyDetail.unionAmount30}}元
            <span style="font-size:12px;color:green">{{moneyDetail.unionAmountFee*100}}%↑</span>
          </td>
          <td>近三十日订单收益</td>
          <td>
            {{moneyDetail.sumAmount30}}元
            <span style="font-size:12px;color:green">{{moneyDetail.sumAmountFee*100}}%↑</span>
          </td>
          <td>近三十日订单数</td>
          <td>{{moneyDetail.orderNum30}}</td>
        </tr>
      </table>
    </div>
    <el-divider></el-divider>
    <div class="perli_con">
      <div class="con_top">
        <span>
          <p>收益比例</p>
          <span>
            <el-form size="mini" :inline="true">
              <!--<el-row class="flo_elrow">
                <el-button size="mini" type="info" round>全部</el-button>
                <el-button size="mini" round>近一年</el-button>
                <el-button size="mini" round>近一月</el-button>
                <el-button size="mini" round>近一周</el-button>
                <el-button size="mini" round>今日</el-button>
                <el-button size="mini" round>自选日期</el-button>
              </el-row>

              <el-form-item prop="begintime" class="input_co" label>
                <el-date-picker
                  class="input_s"
                  v-model="formInline.begintime"
                  type="datetime"
                  placeholder
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </el-form-item>
              <el-form-item prop="endtime" class="input_co1" label="——">
                <el-date-picker
                  class="input_s"
                  v-model="formInline.endtime"
                  type="datetime"
                  placeholder
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </el-form-item>-->
              <el-form-item>
                <div class="block">
                    <span class="demonstration">时间：</span>
                    <el-date-picker
                      v-model="value2"
                      value-format='yyyy-MM-dd'
                      type="daterange"
                      :picker-options="pickerOptions"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      @change="timeChange"
                      align="right">
                    </el-date-picker>
                  </div>
              </el-form-item>
              <el-select v-model="formInline.gameId" multiple placeholder="默认全选" @change="selectChange" class="allsele">
                <el-option
                  v-for="item in serviceOption"
                  :key="item.value"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <!-- <el-button size="mini" @click="query()" icon="el-icon-search">查询</el-button> -->
            </el-form>
          </span>
        </span>
      </div>
      <div class="con_bot">
        <div class="perbot_lef">
          <div class="perpie_lef">用户消费构成</div>
          <div class="perpie_flo00 perpie_flo1" id="echartContainer"></div>
              <el-table :data="tableDataSecond" style="width: 36%; font-size:12px;height:508px;overflow-y: scroll" class="perpie_flo perpie_flo2">
                <el-table-column   max-width="100" :show-overflow-tooltip="true" prop="name" label="用户" width="80"></el-table-column>
                <el-table-column prop="value" label="总消费" width="70"></el-table-column>
                <el-table-column prop="scale" label="总占比" width="70"></el-table-column>
               <!-- <el-table-column prop="name" label="订单消费" width="80"></el-table-column>
                <el-table-column prop="address" label="订单占比" width="80"></el-table-column>-->
              </el-table>
        </div>
        <div class="perbot_rig">
          <div class="perpie_rig">成员收入构成</div>
          <div class="perpie_flo00 perpie_flo11" id="echartContainer2"></div>
              <el-table :data="tableData" style="width: 40%; font-size:12px;height:508px;overflow-y: scroll"  class="perpie_flo perpie_flo22">
                <el-table-column prop="name" max-width="100" :show-overflow-tooltip="true" label="用户" width="80"></el-table-column>
                <el-table-column prop="value" label="总收入" width="80"></el-table-column>
                <el-table-column prop="scale" label="总占比" width="80"></el-table-column>
              <!--  <el-table-column prop="name" label="订单消费" width="80"></el-table-column>
                <el-table-column prop="address" label="订单占比" width="80"></el-table-column>-->
              </el-table>
        </div>
      </div>
    </div>
    <br />
    <br />
  </div>
</template>
<script>
  var echarts = require('echarts')
import { getUnionConsumptionListAPI,getUnionIncomeListAPI,getServiceAPI,getMoneyDetailAPI } from "@/api/user";
import PersonInfo from "./components/PersonInfo";
import { mapGetters } from "vuex";
export default {
  name: "PersonList",
  components: {
    PersonInfo
  },

  data() {
    return {
      serviceOption:[],
      moneyDetail:{
      },
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
            picker.$emit('pick', [new Date(), new Date()]);
          }
        },{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value2: '',
      formInline: {
        end: "", //自选日期结束日期
        limit: 500,//查询多少条数据
        start: "",//自选日期开始日期
        timeType: 0, //时间范围类型 0自定义范围，近一年：1，近一月：2，近一周：3,今日：4
        gameId:[]
      },
      myChartConsum:'',//消费
      myChartIncome:'',// 收入
      editUser: null, // 编辑时传入的对象
      loading: false,
      tableData: [],
      tableDataSecond:[],
      serviceData:[]
    };
  },
  computed: {
    ...mapGetters(["buttons"])
  },
  mounted() {
    // 第一个饼状图
    this.myChartConsum = echarts.init(document.getElementById('echartContainer'));
    // 第二个饼状图
    this.myChartIncome = echarts.init(document.getElementById('echartContainer2'));
    this.getUserList();
    this.getServiceList()
    this.getMoneyDetailFunction()

  },
  methods: {
    // 时间发生改变的事件
    timeChange(value){
      if(value == null){
        this.formInline.start = ''
        this.formInline.end = ''
      }else {
        this.formInline.start = this.value2[0]
        this.formInline.end = this.value2[1]
      }
      this.getUserList()
    },
    // select发生改变触发的方法
    selectChange(value){
    this.formInline.gameId = value
      this.getUserList()
    },
    // 编辑打开弹窗
    openEdit(obj) {
      this.dialog.infoStatus = true;
    },
    // 点击查询事件
    query() {
      this.formInline.page = 1;
      if (this.formInline.status == "全部") {
        this.formInline.status = "";
      } else if (this.formInline.status == "正常") {
        this.formInline.status = 0;
      } else if (this.formInline.status == "封禁") {
        this.formInline.status = 10;
      }
      this.getUserList();
    },
    // 操作成功的钩子用来更新列表
    success() {
      this.getUserList();
    },
    // 关闭弹窗返回的钩子
    closeInfo() {
      this.dialog.infoStatus = false;
    },

    // pageSize发生改变触发
    handleSizeChange(val) {
      this.pageNum = 1;
      this.pageSize = val;
      this.getUserList();
    },
    // pageNum 发生改变触发
    handleCurrentChange(val) {
      this.formInline.page = val;
      this.getUserList();
    },
    // 获取服务类型
    getServiceList() {
      this.loading = true
      getServiceAPI().then(res => {
        this.loading = false
        if (res.rtnInfo.code === 0) {
          this.serviceOption = res.rtnInfo.data
          let copyForm = this.formInline;
          this.serviceOption.forEach(function(item) {
            if (item.id != '' && item.id != null){
              copyForm.gameId.push(item.id)
            }
          })
          this.formInline = copyForm
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 获取流水统计
    getMoneyDetailFunction() {
      this.loading = true
      getMoneyDetailAPI().then(res => {
        this.loading = false
        if (res.rtnInfo.code === 0) {
          this.moneyDetail = res.rtnInfo.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 获取成员收入构成以及消费构成
    getUserList() {
      this.loading = true;
      //用户消费构成
      getUnionConsumptionListAPI(this.formInline).then(res => {
        this.loading = false;
        if (res.rtnInfo.code === 0) {
          this.tableDataSecond = res.rtnInfo.data;
          this.myChartConsum.setOption({
            title: {
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              data: []
            },
            series: [
              {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['70%', '55%'],
                data:this.tableDataSecond /*[
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 234, name: '联盟广告'},
            {value: 135, name: '视频广告'},
            {value: 1548, name: '搜索引擎'}
          ]*/,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          });
        } else {
          this.$message.error("查询报错");
        }
      });
      //成员收入构成
      getUnionIncomeListAPI(this.formInline).then(res => {
        this.loading = false;
        if (res.rtnInfo.code === 0) {
          this.tableData = res.rtnInfo.data;
          this.myChartIncome.setOption({
            title: {
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              data: []
            },
            series: [
              {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['70%', '55%'],
                data: this.tableData/*[
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 234, name: '联盟广告'},
            {value: 135, name: '视频广告'},
            {value: 1548, name: '搜索引擎'}
          ]*/,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          });
        } else {
          this.$message.error("查询报错");
        }
      });

    }
  }
};
</script>
<style>
.userCount {
  background-color: rgba(242, 242, 242, 1);
  height: 45px;
  line-height: 45px;
  margin-left: 38px;
  font-size: 14px;
}
.userCount span {
  margin-right: 40px;
  margin-left: 14px;
}
.input_co {
  margin-left: 38px;
}
.input_co1 {
  margin-left: 0px;
}
.input_s {
  width: 70px;
}
.el-date-editor.input_s.el-input.el-input--mini.el-input--prefix.el-input--suffix.el-date-editor--datetime {
  width: 125px;
}
.per_tb {
  margin-top: 15px;
  margin-left: 38px;
  width: 97.8%;
}
.pagination-right.el-pagination.is-background {
  margin-left: 36px;
  margin-top: 5px;
}

.perli_head {
    width: 100%;
    height: 130px;
    border-bottom: 1px solid lightgrey;
}
table.hed_table {
  width: 1021px;

}
.hed_table td {
  height: 35px;
}
/*.el-row {*/
/*  float: left;*/
/*}*/
.el-form-item.input_co.el-form-item--mini {
  float: left;
}

.con_bot {
  width: 100%;
  height: 500px;
  margin-top: 15px;
}
.perbot_lef {
    width: 48%;
    float: left;
    margin-left: 2%;
    height: 500px;
    border-right: 1px solid lightgrey;
}
.perbot_rig {
    width: 48%;
    float: left;
    margin-left: 52%;
    height: 500px;
    margin-top: -500px;
    /* border-right: 1px solid lightgrey; */
}
/* .perpie_flo.perpie_flo1 {
    width: -webkit-fill-available200px;
    width: 125px;
    height: 137px;
    background: #c5bcbc;
    margin-left: 4px;
    margin-top: 19px;
    float:left;
}
.perpie_flo.perpie_flo11{
  width: -webkit-fill-available200px;
    width: 125px;
    height: 137px;
    background: #c5bcbc;
    margin-left: 4px;
    margin-top: 19px;
    float:left;
} */
.perpie_flo00.perpie_flo1 {
  width: 55%;
  margin-left: 2%;
  height: 280px;
  /* background: lightsteelblue; */
  margin-top: 20px;
  /* margin-right: 20px; */
  float: left;
}
.perpie_flo00.perpie_flo11 {
  width: 55%;
  margin-left: 2%;
  height: 280px;
  /* background: lightsteelblue; */
  margin-top: 20px;
  /* margin-right: 20px; */
  float: left;
}
.flo_elrow.el-row {
  float: left;
}
  .proquanxuan{
    /*width: 180px;*/
  }
.allsele {
  width: 840px;
  height: auto;
  overflow: visible;
  z-index: 999;
  margin-top: marg;
  margin-left: 45px;
}

.con_top form.el-form.el-form--inline{
    /*margin-left: 58px;*/
    margin-top:10px;
    margin-bottom: 20px;
}
</style>

